<template>
  <div class="login-page">
    <div class="login-container">
      <div class="login-form-wrap">
        <!-- logo -->
        <div class="login-hd">
          <div class="logo"></div>
        </div>
        <!-- 表单区域 -->
        <el-form ref="loginForm" :rules="rules" :model="reqParams" >
          <el-form-item prop="mobile">
            <el-input v-model="reqParams.mobile" placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item prop="code">
            <el-input v-model="reqParams.code" show-password placeholder="请输入密码"></el-input>
          </el-form-item>
          <el-form-item>
            <el-checkbox v-model="flag" label="我已阅读并同意用户协议和隐私条款" name="type"></el-checkbox>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="register" :loading="isLoading">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { login } from '@/api/login'
export default {
  name: 'Login',
  data () {
    return {
      reqParams: {
        // 手机号
        mobile: '13911111111',
        // 密码
        code: '246810'
      },
      flag: false,
      // 控制登录不能重复点击
      isLoading: false,
      // 表单验证
      rules: {
        mobile: [
          { required: true, message: '请输入账号或手机号', trigger: 'blur' },
          { pattern: /^1[34578]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { pattern: /^[0-9A-Za-z]{6,18}$/, message: '密码格式不正确', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    register () {
      this.isLoading = true
      this.$refs.loginForm.validate(async (valid) => {
        // 不点击协议，也不能登录
        if (!this.flag) {
          this.isLoading = false
          return this.$message.warning('请同意协议')
        }
        if (valid) {
          try {
            const { data: { data } } = await login(this.reqParams)
            this.$message.success('登录成功!')
            // 设置token
            window.localStorage.setItem('myToken', JSON.stringify(data))

            // 先从地址栏里拿跳转的路径和跳转的name
            const skip = this.$route.query.redirect || '/'
            this.$router.push(skip)
            // const nameSkip = this.$route.query.name
            // this.$router.push({ path: skip, name: nameSkip })
          } catch (e) {
            this.isLoading = false
            this.$message.error('登录失败!')
          }
        }
        this.isLoading = false
      })
    }
  }
}
</script>

<style lang="less" scoped>
html, body {
  width: 100%;
  height: 100%;
}
.login-container {
  position: fixed;
  display: flex;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  justify-content: center;
  align-items: center;
  background: url('../../assets/images/login_bg.jpg') no-repeat;
  background-size: cover;
}
.login-form-wrap {
  min-width: 350px;
  padding: 30px 50px 10px;
  background-color: #fff;
  .login-hd {
    display: flex;
    justify-content: center;
    align-items: center;
    .logo {
      width: 230px;
      height: 80px;
      background: url('../../assets/images/logo_index.png') no-repeat;
      background-size: contain;
    }
  }
}
// 按钮
/deep/.el-button--primary {
  width: 100%;
}
</style>
